<template>
  <div
    class="flex justify-center items-center"
    :style="{ width: props.width, height: props.height }"
  >
    <div
      :style="{
        color: states.color,
        fontSize: states.fontSize + 'px',
        fontWeight: states.fontWeight,
        backgroundColor: states.backgroundColor,
        letterSpacing: states.letterSpacing + 'px',
        lineHeight: states.lineHeight + 'px',
        borderWidth: states.borderWidth + 'px',
        borderColor: states.borderColor,
        borderRadius: states.borderRadius + 'px',
        padding: states.padding + 'px',
      }"
    >
      {{ states.value }}
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed, onMounted, ref, watch } from "vue";
let props = defineProps({
  width: {
    type: String,
    default: "",
  },
  height: {
    type: String,
    default: "",
  },
  models: {
    type: Object,
    default: () => ({}),
  },
});

const states = computed({
  get: () => props.models,
  set: () => {},
}) as any;
</script>

<style scoped lang="scss"></style>
